<template>
  <div class="detail-container">
    <div class="video-panel">
      <video
          ref="videoPlayer"
          :src="currentCamera.streamUrl"
          autoplay
          muted
          class="full-video"
      ></video>
      <div class="video-controls">
        <button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
        <button @click="goBack">返回网格视图</button>
      </div>
    </div>

    <div class="data-panel">
      <h2>{{ currentCamera.id }} - {{ currentCamera.area }}</h2>

      <div class="stats-section">
        <h3>今日统计</h3>
        <div class="stat-item">
          <span>人数统计:</span>
          <span>{{ stats.peopleCount }}</span>
        </div>
        <div class="stat-item">
          <span>异常事件:</span>
          <span>{{ stats.incidents }}</span>
        </div>
        <div class="stat-item">
          <span>最后更新时间:</span>
          <span>{{ stats.lastUpdated }}</span>
        </div>
      </div>

      <div class="data-chart">
        <!-- 这里可以放置图表组件，如ECharts -->
        <div class="chart-placeholder">
          [人数变化图表]
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const videoPlayer = ref(null)
const isPlaying = ref(true)

// 模拟摄像头数据
const allCameras = [
  { id: 'CAM001', area: '大厅入口', streamUrl: 'rtsp://example.com/cam001' },
  { id: 'CAM002', area: '大厅中央', streamUrl: 'rtsp://example.com/cam002' },
  // 其他摄像头...
]

// 当前摄像头
const currentCamera = computed(() => {
  return allCameras.find(cam => cam.id === route.params.id) || {}
})

// 模拟统计数据
const stats = ref({
  peopleCount: 124,
  incidents: 3,
  lastUpdated: new Date().toLocaleTimeString()
})

// 切换播放/暂停
const togglePlay = () => {
  if (videoPlayer.value) {
    if (isPlaying.value) {
      videoPlayer.value.pause()
    } else {
      videoPlayer.value.play()
    }
    isPlaying.value = !isPlaying.value
  }
}

// 返回网格视图
const goBack = () => {
  router.go(-1)
}

// 初始化时更新统计数据
onMounted(() => {
  // 这里可以添加实时更新统计数据的逻辑
  // 例如使用WebSocket或定时请求API

  // 模拟实时更新
  const interval = setInterval(() => {
    stats.value = {
      peopleCount: Math.floor(Math.random() * 200),
      incidents: Math.floor(Math.random() * 5),
      lastUpdated: new Date().toLocaleTimeString()
    }
  }, 5000)

  return () => clearInterval(interval)
})
</script>

<style scoped>
.detail-container {
  display: flex;
  height: 100vh;
}

.video-panel {
  flex: 2;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.full-video {
  width: 100%;
  height: 80%;
  object-fit: contain;
  background-color: #000;
}

.video-controls {
  padding: 15px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.video-controls button {
  padding: 8px 20px;
  cursor: pointer;
}

.data-panel {
  flex: 1;
  padding: 20px;
  border-left: 1px solid #ddd;
  overflow-y: auto;
}

.stats-section {
  margin-top: 20px;
  padding: 15px;
  background: #f5f5f5;
  border-radius: 4px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #eee;
}

.data-chart {
  margin-top: 30px;
  height: 300px;
}

.chart-placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  border: 1px dashed #ccc;
  color: #666;
}
</style>